﻿@model HomeCareLibrary.Models.UserDetailIDModel

<div class="col-lg-9 col-sm-9 right_part">

    <div class="personalization-page personalization-mainpage">
        <div class="flipbox-container box100">
            <div id="flipboxnew" class="flipboxnew"></div>
            <div id="flipbox" class="flipbox">
                <div class="title clearfix">
                    <h1>Personalization</h1>
                    <div class="top-btn-per clearfix">
                        <div id="back-button" class="back-button">
                            <a href="#">
                                <img id="btnBack" class="back-btn" alt="back-btn" src="@Url.Content("~/images/personalization-images/back-btn.png")">
                                <div class="back-mob-btn">
                                    <span class="glyphicon glyphicon-chevron-left"></span>Back
                                </div>
                            </a>
                        </div>
                        <div class="ques-button">
                            <a href="javascript:void(0);">
                                <img class="ques-bt" src="@Url.Content("~/images/personalization-images/ques-btn.png")" alt="ques-btn">
                                <img class="mobques-bt" src="@Url.Content("~/images/personalization-images/mobques-btn.png")" alt="ques-btn">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="main-content">
                    <div class="personalization-content">
                        <div class="personalization-bg">
                            @*Form Start*@

                            @using (Html.BeginForm("UpdateAllPersonalization", "Personalization", FormMethod.Post, new { id = "UpdateAllPersonalizationForm" }))
                            {
                                
                                <div class="personalization-inn">
                                    <div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
                                        <div class="carousel-indicators-fixed-m">
                                            <div class="carousel-indicators-top">
                                                <ol class="carousel-indicators">
                                                    <li id="carousel-example-captions1" class="active" data-slide-to="0" data-target="#carousel-example-captions"></li>
                                                    <li data-slide-to="1" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="2" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="3" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="4" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="5" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="6" data-target="#carousel-example-captions" class="carousel-example-hide"></li>

                                                </ol>
                                                <a data-slide="prev" id="prev" href="#carousel-example-captions" class="left carousel-control carousel-example-show1">
                                                    <!-- <img src="images/personalization-images/previous-btn.png" alt="previous-btn">-->
                                                </a><a data-slide="next" id="next" href="#carousel-example-captions" class="right carousel-control carousel-example-hide1">

                                                    <!--<img src="images/personalization-images/next-btn.png" alt="next-btn">-->
                                                </a>
                                                <a data-slide="finish" id="finish" style="display: none" href="#" class="finish carousel-control"></a>

                                                 @Html.HiddenFor(m => m.dwelling_type, new {@Id="userchange_dwelling_type" })
                                                 @Html.HiddenFor(m => m.home_name , new {@Id="userchange_home_name" })
                                                 @Html.HiddenFor(m => m.featurestring , new {@Id="userchange_featurestring" })
                                                 @Html.HiddenFor(model => model.ps_country , new {@Id="userchange_ps_country" })
                                                 @Html.HiddenFor(model => model.ps_state_province , new {@Id="userchange_ps_state_province" })
                                                 @Html.HiddenFor(model => model.ps_goal_string , new {@Id="userchange_ps_goal_string" }) 

                                                 @Html.HiddenFor(m => m.ps_knowledge_level , new {@Id="userchange_ps_knowledge_level" })
                                                 @Html.HiddenFor(m => m.ps_priority , new {@Id="userchange_ps_priority" })


                                                @Html.HiddenFor(m => m.app_mo_alert_badge , new {@Id="userchange_app_mo_alert_badge" })
                                                @Html.HiddenFor(m => m.app_mo_alert_popup , new {@Id="userchange_app_mo_alert_popup" })
                                                @Html.HiddenFor(m => m.app_mo_alert_week , new {@Id="userchange_app_mo_alert_week" })
                                                @Html.HiddenFor(m => m.app_mo_alert_day , new {@Id="userchange_app_mo_alert_day" })
                                                @Html.HiddenFor(m => m.app_mo_alert_hour , new {@Id="userchange_app_mo_alert_hour" })
                                                @Html.HiddenFor(m => m.web_mo_alert_email , new {@Id="userchange_web_mo_alert_email" })
                                                <input type="hidden" id="userchange_web_mo_alert_email_checkbox" value="">



                                                 @Html.HiddenFor(m => m.dwelling_type)
                                                 @Html.HiddenFor(m => m.user_id)
                                                 @Html.HiddenFor(m => m.home_number)

                                                <input type="hidden" id="dwellingChanged" value="">

                                            </div>
                                        </div>
                                        <div class="carousel-inner">
                                            <div class="item active">
                                                <div class="personalization-data Dwelling-part-data">

                                                    @{Html.RenderPartial("dwellingtype");}
                                                </div>
                                            </div>

                                            <div class="item">
                                                <div class="personalization-data home-features-data">
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="personalization-data local-climate-data">
                                                </div>
                                            </div>

                                            <div class="item">

                                                <div class="personalization-data goal-data-per">
                                                </div>
                                            </div>

                                            <div class="item">
                                                <div class="personalization-data knowledge-data-outer">
                                                </div>
                                            </div>

                                            <div class="item">
                                                <div class="personalization-data Priority-data-o">
                                                </div>
                                            </div>
                                            <div class="item" id="divmon">
                                            </div>
                                              <input type="hidden" id="refreshed" value="no">
                               </div>
                                    </div>
                                </div>
@*Form End*@
                            }
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>
                    <div id="wait" style="display:none;width:100%;z-index: 999;height:100%;position:absolute;top:0; bottom:0;left:0; right:0;padding:2px;background-color: rgba(0, 0, 0, 0.4);">
                    <div style="width: 86px; margin: 27% auto 0px;"><img style="" src='@Url.Content("~/images/demo_wait.gif")' width="64" height="64" /><br>Loading..</div></div>
</div>

@section script {

    <script src="@Url.Content("~/js/carousel.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/js/jquery.icheck.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/js/personalization/PersonalizationMobile.js")" type="text/javascript"></script>
    <script type="text/javascript">


        //On change of dwelling type we need to change the value of feature string to default values instead of feature string return from database.
        // so, make an ajax call and save value in session that user changed the dwelling type.
        //$("#getDwellingType").click(function () {
        //    $(this).select();
        //});

        $("#getDwellingType").live("change", function (e) {
            var DselectedItem = "";
            DselectedItem = $(this).val();
            $("#userchange_dwelling_type").val(DselectedItem);

            $.ajax({
                type: "GET",
                data: { id: $(this).val() },
                url: "Personalization/ChangeDwellingType",
                success: function (msg) {
                    $("#userchange_featurestring").val(msg);
                    checkedCheckonbasedoffeatureString();

                }
            });
            $("#dwellingChanged").val("Yes");
            window.scrollTo(0, 0);
        });
        //DWELLING TYPE END


        //LOCAL CLIMATE START
        function changeStateAccToCountry(selectedItem, ddlStates) {
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: "@(Url.Action("getStatesbyCountry", "Personalization"))",
                data: { "country": selectedItem },
                success: function (data) {
                    ddlStates.html('');

                    if (selectedItem == "US") {
                        ddlStates.append($('<option></option>').val("").html("-Select state or region-"));
                    }
                    else if (selectedItem == "CAN") {
                        ddlStates.append($('<option></option>').val("").html("-Select Province-"));
                    }


                    $.each(data, function (id, option) {
                        ddlStates.append($('<option></option>').val(option.id).html(option.name));
                    });

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');

                }
            });
        }

        //LOCAL CLIMATE END

        //Finish Button Click Start
        $("#finish").click(function () {
            if ($("#chkweb_mo_alert_email").is(':checked') && $("#moweb_mo_alert_email").val() == '') {
                alert("You must enter the email.");
            }
            else {

                $("#UpdateAllPersonalizationForm").submit();
            }
        });
        //Finish Button Click END

        $(document).ready(function () {

            $(".carousel-example-hide").click(function () {

                var returnValue = Validations();
                if (returnValue == "false") {
                    return false;
                }
                else {
                    $(".back-button").hide();
                    var currentvalue = $(this).attr('data-slide-to');
                    $(".carousel-indicators li").each(function (index) {
                        $(this).removeClass('active1');

                    });
                    $(".carousel-indicators li").each(function (index) {

                        if ($(this).attr('data-slide-to') <= currentvalue) {
                            if (currentvalue == 6) {
                                $("#next").css("display", "none");
                                $("#finish").css("display", "block");
                            }
                            else {
                                $("#next").css("display", "block");
                                $("#finish").css("display", "none");

                            }
                            $(this).addClass('active1');
                        }

                    });

                    $("#back-button").hide();

                    var count = '';
                    count = $(this).attr('data-slide-to');
                    PartialViewsAfterClick(count, "next");
                }
                window.scrollTo(0, 0);
            });

            $("#carousel-example-captions1").click(function () {

                var count = '0';
                PartialViewsAfterClick(count, "first");

                var currentvalue = $(this).attr('data-slide-to');

                $(".carousel-indicators li").each(function (index) {
                    $(this).removeClass('active1');

                });
                $(".carousel-indicators li").each(function (index) {

                    if ($(this).attr('data-slide-to') <= currentvalue) {
                        $(this).addClass('active1');
                    }
                });

                $(".back-button").show();
                //If user click directly on circle 1
                $("#next").css("display", "block");
                $("#finish").css("display", "none");
                window.scrollTo(0, 0);
            });

            $("#btnBack").click(function () {
                window.history.back();
            });




            var $first = $('li:first', 'ol'),
             $last = $('li:last', 'ol');
            //Have the first and last li's set to a variable
            //$("#next").live("click", function (e) {
            $("#next").click(function () {

                //checkedAddInString();


                var returnValue = Validations();

                if (returnValue == "false") {
                    return false;
                }
                else {

                    $(".back-button").hide();
                    var $next,
                        $selected = $(".active");

                    //get the selected item
                    // If next li is empty , get the first
                    $next = $selected.next('li').length ? $selected.next('li') : $first;

                    $selected.addClass("active1");
                    $next.addClass('active');


                    if ($last.hasClass('active')) {
                        $("#next").css("display", "none");
                        $("#finish").css("display", "block");
                    }
                    else {
                        $("#next").css("display", "block");
                        $("#finish").css("display", "none");
                    }

                    var count = '';
                    $(".carousel-indicators li").each(function () {
                        if ($(this).hasClass("active")) {
                            count = $(this).attr('data-slide-to');
                        }
                    });

                    PartialViewsAfterClick(count, "next");




                }
                window.scrollTo(0, 0);
            });

            $("#prev").click(function () {

                $first.next('li')
                var $prev,
                    $selected = $(".active");
                // get the selected item
                // If prev li is empty , get the last

                if ($selected.prev('li').prev('li').length == 0) {

                    $(".back-button").show();
                }


                var count = '';
                $(".carousel-indicators li").each(function () {
                    if ($(this).hasClass("active")) {
                        count = $(this).attr('data-slide-to');
                    }
                });

                if (count > 0) {
                    //if ($selected.prev('li').length >= 1) {
                    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
                    $selected.removeClass("active1");

                    if ($last.hasClass('active1')) {

                        $("#next").css("display", "none");
                        $("#finish").css("display", "block");
                    }
                    else {

                        $("#next").css("display", "block");
                        $("#finish").css("display", "none");
                    }

                    PartialViewsAfterClick(count, "previous");
                }
                else {

                    return false;
                }

                window.scrollTo(0, 0);
            });

        });

        // For Flip
        $(".btn-left").live("click", function (e) {

            var ID = $(this).attr("data-name");
            var div = "";

            $.ajaxSetup({ cache: false });

            $.ajax({
                cache: false,
                headers: { "cache-control": "no-cache" },
                type: "GET",
                url: "@(Url.Action("featureDetail", "Personalization"))",
                data: { 'id': ID },
                success: function (data) {

                    $(".flipboxnew").flippy({

                        direction: "left",
                        duration: "500",
                        verso: data,
                        onFinish: function () {
                            window.scrollTo(0, 0);
                        },
                        onReverseFinish: function () {
                            $(".flipbox").show();

                            //$('.home-features-data').html('');
                            //$('.home-features-data').load('/Personalization/HomeFeatures', function () {

                            //    if ($(this).html() == '') {
                            //        window.location.href = "/Personalization/UpdatePersonalization"
                            //    }

                            //});

                        }
                    });

                    $(".flipbox").hide();
                    e.preventDefault();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve data.');

                }
            });

        });



        $("#web_mo_alert_email").live("blur", function (e) {

            //check that email format  is correct
            if ($(this).val() != '') {
                var returnValue = isValidEmailAddress($(this).val());
                if (returnValue == false) {
                    alert("Email address is not in the proper format for a valid email address.");
                }
                else {
                    $("#userchange_web_mo_alert_email").val($(this).val());
                }
            }
        });

        $("#moweb_mo_alert_email").live("blur", function (e) {

            //check that email format  is correct
            if ($(this).val() != '') {
                var returnValue = isValidEmailAddress($(this).val());
                if (returnValue == false) {
                    alert("Email address is not in the proper format for a valid email address.");
                }
                else {
                    $("#userchange_web_mo_alert_email").val($(this).val());
                }
            }
        });

        function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
            return pattern.test(emailAddress);
        }


        $("#carousel-example-captions").on('slid.bs.carousel', function (event) {

            if ($(this).find('.active').index() == 2) {
                $('.home-features-data').html('');
            }
        });



  </script>

 
}